import React ,{ useState,useEffect }from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Typography } from '@mui/material';

import { Navigation, Pagination, Autoplay } from 'swiper/modules'; 
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay'; 
import { Box } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import recommend1 from '../resources/recommend/recommend1.png';
import recommend2 from '../resources/recommend/recommend2.png';
import recommend3 from '../resources/recommend/recommend3.png';
import recommend4 from '../resources/recommend/recommend4.png';
import recommend5 from '../resources/recommend/recommend5.png';
import recommend6 from '../resources/recommend/recommned6.png';
import { fetchHotVideos } from '../api/recommend';
//hot video!!
function ImageSlider() {
  const navigate = useNavigate();
  
  // const images = [
  //   {src: recommend1, id: 1},
  //   {src: recommend2, id: 2},
  //   {src: recommend3, id: 3},
  //   {src: recommend4, id: 4},
  //   {src: recommend5, id: 5},
  //   {src: recommend6, id: 6}
  // ];
  
   const [videos, setVideos] = useState([]);
   useEffect(() => {
     fetchHotVideos()
       .then(response => {
         console.log(response);
         setVideos(response);
       })
       .catch(error => {
         console.error('获取热门视频失败:', error);
       });
   }, []);
   const handleImageClick = (id) => {
     navigate(`/seed/${id}`);
   };
  
  return (
    <Box
  sx={{
    width: '100%',
    maxWidth: '600px',
    height: 'auto',
    margin: '0 0',
    padding: '16px',
    '& .swiper': {
      paddingBottom: '30px' // 为分页器留出空间
    }
  }}
>
  <Swiper
    modules={[Navigation, Pagination, Autoplay]}
    spaceBetween={10}
    slidesPerView={1}
    navigation
    pagination={{ clickable: true }}
    speed={500}
    autoplay={{
      delay: 1000,
      disableOnInteraction: false
    }}
    breakpoints={{
      768: {
        slidesPerView: 1,
        spaceBetween: 20
      }
    }}
  >
    {videos.map((img) => (
      <SwiperSlide key={img.torrent.id}>
  <Box
    sx={{
      position: 'relative',
      width: '100%',
      height: '350px',
      maxHeight: '500px',
      maxWidth: '500px',
      margin: '0 auto',
      cursor: 'pointer',
      overflow: 'hidden',
      borderRadius: '8px',
    }}
    onClick={() => handleImageClick(img.torrent.id)}
  >
    <img
      src={img.coverImageBase64}
      alt={`slider-image-${img.torrent.id}`}
      style={{
        width: '100%',
        height: '100%',
        objectFit: 'cover',
        display: 'block',
      }}
    />
    <Typography
      sx={{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        bgcolor: 'rgba(0, 0, 0, 0.5)', // 半透明黑色背景
        color: '#fff',
        padding: '8px 12px',
        fontSize: '1rem',
        textAlign: 'center',
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        boxSizing: 'border-box',
        userSelect: 'none',
      }}
    >
      {img.torrent.name||img.torrent.fileName}
    </Typography>
  </Box>
</SwiperSlide>

    ))}
  </Swiper>
</Box>
  );
}

export default ImageSlider;